<template>
    <el-row>
        <confirm ref="confirm"></confirm>

        <el-col :span="3">
            <div class="logo">欢迎欢迎</div>
        </el-col>
        <el-col :span="17">
            <div class="news">欢迎欢迎</div>
        </el-col>
        <chatDialog :show-chat="showChat"></chatDialog>
        <el-col :span="4">
            <el-badge :value="1" :max="99" class="item space" title="消息">
                <i class="el-icon-fa-bell-o"></i>
            </el-badge>
            <i class="el-icon-fa-commenting-o space" title="聊天" @click="openChat"></i>
            <i class="el-icon-fa-tachometer space" title="主题"></i>
            <i class="el-icon-fa-sign-out space" title="退出" @click="logout"></i>
            <i class="el-icon-fa-ellipsis-v space"></i>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link dropdownlink">
                    <i class="el-icon-fa-user-circle"></i> &nbsp;{{userName}}&nbsp;<i
                        class="el-icon-fa-angle-double-down"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>修改密码</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
    </el-row>
</template>

<script>
    import Confirm from '../common/confirm.vue';
    import ChatDialog from '../common/chatDialog.vue';

    export default {
        data () {
            return {
                userName: '',
                showChat: false
            }
        },
        components: {
            Confirm, ChatDialog
        },
        methods: {
            openChat(){
                this.showChat = true;

                // 加入
                this.$store.state.socket.emit('join');

                this.$store.state.socket.on('open', function (data) {
                    console.info(data);
                });

                this.$on('closeChat', function (data) {
                    this.showChat = false;
                });
            },
            logout(){
                this.$refs.confirm.show({
                    title: '系统提示',
                    message: '确认退出系统?',
                    ok () {
                        window.location.href = '/admin/index/logout';
                    },
                    cancel () {
                        console.info('logout cancel.');
                    }
                });
            }
        },
        created(){
            this.$http.get('/admin/index/init').then((response) => {
                let data = response.data;
                if (data.errno == 0) {
                    this.userName = data.data.userName;
                } else {
                    console.info("init fail.");
                }
            }, (response) => {
                console.error(response);
            });
        }
    };
</script>

<style scoped>
    .logo {
        padding-left: 10px;
    }

    .news {
        padding: 0 12px;
    }

    .dropdownlink {
        cursor: pointer;
    }

    .dropdown {
        font-size: 13px;
    }

    .item {
        line-height: 30px;
    }

    .space {
        margin-right: 10px;
    }

    i {
        cursor: pointer;
    }
</style>
